<style lang="scss">

</style>

<template>
  <div class="page-home">
    <z-space vertical>
      <z-search-table :def="dataTable">
        <template #table__action="scope">
          <template v-if="scope.id === 'slot'">
            <el-button type="text">
              <z-space column-gap="10px">
              详情
              </z-space>
            </el-button>
          </template>
        </template>
      </z-search-table>
      <vue-code-mirror :tpl="def.tpl" :js="def.js"></vue-code-mirror>

      <h3>参数</h3>
      <doc-props :data="doc.props"></doc-props>

      <h3>slots</h3>
      <doc-props def-type="Slots" :data="doc.slots"></doc-props>

      <vue-code-mirror :tpl="def.slots" ></vue-code-mirror>
    </z-space>
  </div>
</template>

<script>
import {useDataTable} from "../../../babel-static/helpers";
import VueCodeMirror from "@example/components/VueCodeMirror";
import DocProps from "@example/plugins/example/components/DocProps";

export default {
  components: {DocProps, VueCodeMirror},
  data() {
    return {
      doc: {
        props: [
          {
            name: 'autoInit',
            type: 'Boolean',
            defVal: 'true',
            desc: '默认自动加载数据'
          },
          {
            name: 'onInit',
            type: 'Function',
            defVal: 'null',
            desc: '用户初始化后回调'
          }
        ],
        slots: [
          {
            name: 'table__content_beforebegin',
            desc: '表格content标签开始前'
          },
        ]
      }
    }
  },
  setup(props, ctx) {

    function init() {
      return useDataTable({
        defaultUrl: '/api/list',
        request: globalThis.Req,
        columnDefMap: {
          sourceDbName: {
            formatter(row, column, cellValue) {
              return cellValue +'x';
            }
          }
        },
        appendColumns: [
          {
            width: 150,
            label: '操作',
            actions: [
              {
                id: 'slot',
                useSlot: true
              }
            ]
          }
        ],
      });
    }


    // let js = init.toString().replace(`function init()`, '')

    let def = {
      tpl: `<template>
        <z-search-table :def="dataTable">
        <template #table__action="scope">
          <template v-if="scope.id === 'slot'">
            <el-button type="text">
              <z-space column-gap="10px">
              详情
              </z-space>
            </el-button>
          </template>
        </template>
      </z-search-table>
</template>`,
      js:
`
import {hooks} from "pkg-exms/lib/pkg-exms.common.js";

dataTable = hooks.useDataTable({
  defaultUrl: '/api/list',
  request: globalThis.Req,
  columnDefMap: {
    sourceDbName: {
      formatter(row, column, cellValue) {
        return cellValue +'x';
      }
    }
  },
  appendColumns: [
    {
      width: 150,
      label: '操作',
      actions: [
        {
          id: 'slot',
          useSlot: true
        }
      ]
    }
  ],
});
    `,
      slots:
`
<slot name="table__content_beforebegin"></slot>
<div class="z-search-table__content">
  <slot name="table__content_afterbegin"></slot>
  <slot name="table__table_beforebegin"></slot>
  <z-table>
    <template v-slot:action="scope"><slot name="table__action" v-bind="scope"></slot></template>
    <template v-slot:page_before="scope"><slot name="table__page_before"></slot></template>
  </z-table>
  <slot name="table__table_afterend"></slot>
  <slot name="table__content_beforeend"></slot>
</div>
<slot name="table__content_afterend"></slot>
`
    }



    let dataTable = init();

    return {
      def,
      dataTable
    }
  }
}
</script>
